<%--
  Created by IntelliJ IDEA.
  User: zhangyunpeng
  Date: 2021/8/6
  Time: 8:51 上午
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <%@include file="../../basepath.jsp"%>
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="css/common.css?v=<%=Math.random()%>"/>
</head>
<body>
<span class="layui-breadcrumb">
      <a href="asset/list">资产类型维护</a>
      <a href="">性别列表</a>
    </span>
<table id="t" lay-filter="table"></table>
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript"  src="js/jquery.min.js"></script>
<script type="text/javascript"  src="js/qs.min.js"></script>
<script type="text/javascript">
    //利用layui的api初始化table组件
    layui.use('table',function(){
        //获取表格对象
        var table = layui.table
        //加载静态列表的方式，第一个参数table代表table上设置的lay-filter的值
        //第二个参数按照官方文档传入
        table.init('table',{
            //表格的选择器，按照css选择器的方式传入，这里使用了table的id
            elem: '#t',
            //表格的高度，可以设置数字代表固定值，使用full-数字代表动态设置高度
            height: 'full-80',
            //代表默认不做静态数据的排序，这里是开启后台服务排序的意思
            autoSort: false ,
            toolbar: '#query-form',
            //表格的表头设置，需要使用二维数组
            //field代表每一列的属性值，与java中的实体对象Sex一一对应
            //title代表表头展示的内容，sort代表开启排序
            cols:[[
                {field:'id',title:'主键',sort: true},
                {field:'sexName',title:'性别名称'},
            ]]
        })
    })
</script>
<!--
	该模块代表头部模版的自定义模块，需要使用script标签type=“text/html”来实现
	该段代码无需手写，粘贴到list.jsp中直接使用即可，但是需要通过标签结构来学习如何进行构建
-->
<script id="query-form" type="text/html">
    <!-- 在这个代码块中可以使用{{}}来获取一些layui的数据，d代表整个数据对象，d.where代表条件查询的参数-->
    <form class="layui-form" id="form">
        <div class="layui-inline">
            <label class="layui-form-label" style="width: auto">名称</label>
            <div class="layui-input-inline">
                <input class="layui-input"
                       name="sexName" type="text" placeholder="请输入性别名称"  value="{{d.where.sexName}}"/>
            </div>
        </div>
        <div class="layui-inline">
<shiro:hasPermission name="permission:query">
            <button type="button"
                    lay-event="query"
                    class="layui-btn ">查询</button>
</shiro:hasPermission>
            <shiro:hasPermission name="permission:insert">
                <a href="sex/add/page" class="layui-btn ">新增</a>
            </shiro:hasPermission>
        </div>
    </form>
</script>

    <!-- 每行工具栏的模版 -->
    <script type="text/html" id="tool">
        <shiro:hasPermission name="permission:update">
            <%--这里利用了layui的模版语法中的d对象来获取每行数据的id，这样我们在跳转的时候才能知道修改的到底是哪条数据--%>
            <a href="sex/edit/page?id={{d.id}}" class="layui-btn layui-btn-warm layui-btn-xs" >修改</a>
        </shiro:hasPermission>
        <shiro:hasPermission name="permission:delete">
            <button type="button" lay-event="delete"
                    class="layui-btn layui-btn-danger layui-btn-xs">删除</button>
        </shiro:hasPermission>
</script>
<script type="text/javascript">
    layui.use('table',function(){
        var table = layui.table
        table.init('table',{
            elem: '#t',
            height: 'full-80',
            autoSort: false ,
            toolbar: '#query-form',
            cols:[[
                {field:'id',title:'主键',sort: true},
                {field:'sexName',title:'性别名称'},
                //定义工具栏列，只需要定义表头名称，templet代表指定使用的模版的选择器关联id为tool的script标签
                {title:'操作',templet: '#tool'}
            ]],
            // data:[
            //     {id:'1',sexName:'男'},
            //     {id:'2',sexName:'女'}
            // ],
            page:true,
            url:'sex/list/page',
            response: {
                //将返回的默认成功状态码定义为200
                statusCode: 200
            },request: {
                pageName: 'pno', //页码的参数名称，默认：page
                limitName: 'psize' //每页数据量的参数名，默认：limit
            }
            , where:{
                sexName:''
            }
        })
        table.on('toolbar(table)',function(obj){
            if(obj.event == 'query'){
                var queryForm = $('#form').serialize()
                var queryFormObj = Qs.parse(queryForm)
                console.log(queryFormObj)
                //调用表格重载函数会出发表格重新查询，这里需要
                //在where中传入我们的条件查询对象，这个属性就会传到后台
                table.reload('t',{
                    where:queryFormObj
                })
            }
        })
        table.on('sort(table)',function(obj){
            console.log(obj)
            var queryForm = $('#form').serialize()
            var queryFormObj = Qs.parse(queryForm)
            table.reload('t',{
                initSort: obj,
                where:{
                    ...queryFormObj,
                    sortField:obj.field,
                    sortType:obj.type
                }
            })
        })
        var layer = layui.layer
        table.on('tool(table)',function(obj){

            //当点击了删除按钮时触发的事件
            if(obj.event == 'delete'){
                //获取本行数据的id
                var id = obj.data.id
                console.log(id)
                layer.confirm('正在删除当前数据是否继续?',{
                    icon:3,
                    title:'提示'
                },function(index){
                    //提交到删除接口的路径并且传入id
                    location.href = 'sex/delete?id='+id
                    layer.close(index)
                })
            }
        })
    })
</script>
</body>
</html>
